import * as React from 'react'
import { Toast } from 'antd-mobile'
import { NavBar, Input, Button } from 'components'
import { showPhone } from '../methods'
import { post } from '../../../utils'
import './EditPsw.less'

export default class EditPhoneNumberVerify extends React.Component<any, any> {
    public state = {
        verifyCode: '',
        label: '发送验证码',
        reLabel: false
    }

    private allTime: number = 60

    private verifyMsg: string = ''

    private verificationTimer: number

    public render(): JSX.Element {
        const { userInfo } = this.props
        const { verifyCode, label, reLabel } = this.state
        return (
            <div className="editPhoneNumberVerify">
                <NavBar fixed={true} title={<div style={{ fontSize: '0.97rem', color: '#222' }}>修改支付密码</div>} />
                <div className="editPhoneNumberVerify_inptuWrap">
                    <p>当前手机号码：{userInfo && showPhone(userInfo.phone)}</p>
                    <div className="editPhoneNumberVerify_inptuWrap_verifyWrap">
                        <Input
                            maxLength={4}
                            className="editPhoneNumberVerify_inptuWrap_verify"
                            type="text"
                            placeholder="请输入短信验证码"
                            value={verifyCode}
                            onChange={this.handleChange}
                            onClose={() => { this.setState({ verifyCode: '' }) }}
                        />
                        <Button className="editPhoneNumberVerify_inptuWrap_verifyBtn" disabled={reLabel} onClick={this.handleSendMsg}>{label}</Button>
                    </div>
                </div>
                <div className="editPhoneNumberVerify_operation">
                    <Button
                        className="editPhoneNumberVerify_operation_btn"
                        disabled={(verifyCode.length === 4) ? this.verifyMsg.length ? false : true : true}
                        onClick={() => {
                            if (verifyCode === this.verifyMsg) {
                                this.goToUrl('/my/authentication')
                            } else {
                                Toast.info('验证码不正确', 1)
                            }
                        }}
                    >下一步
                    </Button>
                </div>
            </div>
        )
    }

    public componentWillUnmount() {
        clearInterval(this.verificationTimer)
    }

    private handleSendMsg = () => {
        const { userInfo } = this.props
        post('usersapi/sendSms', { phone: userInfo.phone, type: 2 }).then((data: any) => {
            this.verifyMsg = `${data}`
            this.setState({
                reLabel: true,
                label: '重新发送' + this.allTime + 'S',
            })
            const handleCountDown = () => {
                this.allTime--
                if (this.allTime === 0) {
                    this.setState({
                        label: '重新发送',
                        reLabel: false
                    })
                    clearInterval(this.verificationTimer)
                    this.allTime = 60
                } else {
                    this.setState({
                        reLabel: true,
                        label: '重新发送' + this.allTime + 'S',
                    })
                }

            }
            this.verificationTimer = window.setInterval(handleCountDown, 1000)
        })
    }

    private handleChange = (e: any) => {
        const val = e.target.value
        this.setState({
            verifyCode: val
        })
    }
    private goToUrl = (url: string = '/') => {
        this.props.history.push(url)
    }
}